<script lang="tsx" setup>
import { ref, watch, watchEffect } from 'vue';
import { getUserInfo } from '@/service/api/system/user';
import type { UserInfoVO } from '@/service/types/system';
import type { DictDataOption } from '@/typings/global';
const userInfo = ref<UserInfoVO | undefined>(undefined);
const loadingInfo = ref<boolean>(true);
defineOptions({
  name: 'UserDetails'
});
interface Props {
  rowId?: string | number;
  sysUserSex: DictDataOption[];
}
const props = defineProps<Props>();
const visible = defineModel<boolean>('visible', {
  default: false
});
const featchUserInfo = () => {
  loadingInfo.value = true;
  getUserInfo(props.rowId as string).then(res => {
    if (res?.data) {
      userInfo.value = res?.data.data;
    }
    loadingInfo.value = false;
  });
};
watchEffect(() => {
  if (props.rowId) {
    featchUserInfo();
  }
});

watch(visible, () => {
  if (!visible.value) {
    userInfo.value = undefined;
  }
});
</script>

<template>
  <NDrawer v-model:show="visible" :width="502">
    <NDrawerContent title="用户信息" closable>
      <div class="p-10px">
        <div v-if="loadingInfo" class="flex flex-row flex-gap-2 flex-items-center">
          <NSkeleton height="48px" circle />
          <div class="flex flex-col flex-gap-2">
            <div class="flex flex-row flex-gap-2 flex-items-center">
              <div class="w-100px"><NSkeleton height="20px" width="100%" /></div>
              <div class="w-60px"><NSkeleton height="20px" width="100%" /></div>
            </div>
            <div>
              <NSkeleton height="20px" width="80%" />
            </div>
          </div>
        </div>
        <div v-else class="flex flex-row flex-gap-2 flex-items-center">
          <NAvatar round :size="48" :src="userInfo?.user.avatar" />
          <div class="flex flex-col flex-gap-2">
            <div class="flex flex-row flex-gap-2 flex-items-center">
              <div>{{ userInfo?.user.userName }}</div>
              <NTag type="info" size="small">
                正常
                <template #icon>
                  <SvgIcon icon="mdi:check-circle" />
                </template>
              </NTag>
            </div>
            <div class="color-zinc-4">这个人很懒，什么也没修改！</div>
          </div>
        </div>
      </div>
      <NTabs type="line" animated>
        <NTabPane name="basic" tab="基本信息">
          <NSpin :show="loadingInfo">
            <NDescriptions label-placement="top" :columns="1" label-class="color-zinc-6">
              <NDescriptionsItem label="账号">
                {{ userInfo?.user.userName }}
              </NDescriptionsItem>
              <NDescriptionsItem label="昵称">
                {{ userInfo?.user.nickName ? userInfo?.user.nickName : '-' }}
              </NDescriptionsItem>
              <NDescriptionsItem label="手机号">
                {{ userInfo?.user.phonenumber ? userInfo?.user.phonenumber : '-' }}
              </NDescriptionsItem>
              <NDescriptionsItem label="邮箱">
                {{ userInfo?.user.email ? userInfo?.user.email : '-' }}
              </NDescriptionsItem>
              <NDescriptionsItem label="性别">
                <DictTag :dicts="props.sysUserSex" :value="userInfo?.user.sex" type="text" />
              </NDescriptionsItem>
            </NDescriptions>
          </NSpin>
        </NTabPane>
        <NTabPane name="role_dept" tab="岗位信息">
          <NDescriptions label-placement="top" :columns="1" label-class="color-zinc-6">
            <NDescriptionsItem label="部门名称">{{ userInfo?.user.deptName }}</NDescriptionsItem>
            <NDescriptionsItem label="岗位">
              <div v-if="userInfo?.posts.length !== 0" class="flex flex-col flex-gap-2">
                <div v-for="(item, index) in userInfo?.posts" :key="index">{{ item.postName }}</div>
              </div>
              <div v-else>-</div>
            </NDescriptionsItem>
          </NDescriptions>
        </NTabPane>
        <NTabPane name="other" tab="其他">
          <NDescriptions label-placement="top" :columns="1" label-class="color-zinc-6">
            <NDescriptionsItem label="角色">
              <div v-if="userInfo?.user.roles.length !== 0" class="flex flex-col flex-gap-2">
                <div v-for="(item, index) in userInfo?.user.roles" :key="index">{{ item.roleName }}</div>
              </div>
              <div v-else>-</div>
            </NDescriptionsItem>
          </NDescriptions>
        </NTabPane>
      </NTabs>
    </NDrawerContent>
  </NDrawer>
</template>

<style lang="scss" scoped></style>
